import HeaderComponent from '@/components/HeaderComponent/HeaderComponent';

import { Image, Toast } from 'antd-mobile';
import { useTranslation } from 'react-i18next';
import copy from 'copy-to-clipboard';
import { useEffect, useState } from 'react';
import getAssetsFile from '@/utils/pub-use';
import { getInvitedCode } from '@/api/module/user';

const InviteComponent = () => {
  const { t } = useTranslation();

  const [inviteInfo, setInviteInfo] = useState<
    Awaited<ReturnType<typeof getInvitedCode>>['data']
  >({
    invite_url: '',
    tgm_url: '',
  });
  const reqInvitedCode = async () => {
    const res = await getInvitedCode();
    if (res.code === 0) {
      setInviteInfo({
        invite_url: res.data.invite_url,
        tgm_url: res.data.tgm_url,
      });
    } else {
      setInviteInfo({
        invite_url: res.msg,
        tgm_url: '',
      });
      Toast.show({
        content: res.msg,
      });
    }
  };
  const copyLink = () => {
    copy(inviteInfo.invite_url);
    Toast.show({
      content: t('copySuccess'),
    });
  };
  useEffect(() => {
    reqInvitedCode();
  }, []);
  return (
    <div className="mt-4">
      <div className="bg-bg-1 text-center py-5 rounded-tl-lg rounded-tr-lg mx-4 font-semibold text-xl">
        {inviteInfo.invite_url}
      </div>
      <div className="bg-custom-gradient-2 px-3 py-10 rounded-lg">
        <div className="px-16">
          {inviteInfo.tgm_url && <Image src={inviteInfo.tgm_url} />}
        </div>
        <div className="flex bg-bg-18 py-4 px-4 rounded-md items-center mt-6">
          <span className="truncate">{inviteInfo.invite_url}</span>
          <span className="ml-4">
            <Image
              onClick={copyLink}
              width={15}
              src={getAssetsFile('copy-icon.png')}
            />
          </span>
        </div>
      </div>
    </div>
  );
};
export default function Invite() {
  return (
    <div className="text-white-1 px-4">
      <HeaderComponent title="recommendationCode" />
      <InviteComponent />
    </div>
  );
}
